<template>
  <h1>数据展示</h1>

  <el-row :gutter="20">
    <el-col :span="12">
      <div ref="b1" class="myEcharts"></div>
    </el-col>

    <el-col :span="12">
      <div ref="b2" class="myEcharts"></div>
    </el-col>
  </el-row>


  <el-row :gutter="20">
    <el-col :span="12">
      <div ref="b3" class="myEcharts"></div>
    </el-col>
    <el-col :span="12">
      <div ref="b4" class="myEcharts"></div>
    </el-col>
  </el-row>

</template>

<script lang="js" setup>
import * as echarts from "echarts";
import { onMounted, ref } from "vue";
import them from "@/utils/js/them"
import { getb1pi, getb2pi, getb3pi, getb4pi } from "@/utils/showData";
echarts.registerTheme('westeros', them)
const b1 = ref();
const b2 = ref();
const b3 = ref();
const b4 = ref();
onMounted(() => {
  getShow()
});


const getShow =async ()=>{
  let res1  =  await getb1pi();
  initEcharts1(res1.data);
  let res2  =  await getb2pi();
  initEcharts2(res2.data);
  let res3  =  await getb3pi();
  initEcharts3( res3.data);
  let res4  =  await getb4pi();
  initEcharts4( res4.data);
}
//表1：
const initEcharts1 = (dataB1) => {
  // var myChart = echarts.init(document.getElementById('myEcharts'));

  let myChart = echarts.init(b1.value,"westeros");
  myChart.setOption({
    title: {
      text: "科室挂号信息"
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      axisLabel: { interval: 0, rotate: 35},
      data: dataB1.d1
    },
    // dataZoom:[
    //   {
    //     show: true,
    //     start: 0,
    //     end: 50
    //   }
    // ],
    yAxis: {
      type: 'value'
    },
    series: [
      {
        name: "人数",
        type: "bar",
        data: dataB1.d2
      }
    ]
  });
};

//表2：
const initEcharts2 = (dataB2) => {
  // var myChart = echarts.init(document.getElementById('myEcharts'));
  let myChart = echarts.init(b2.value,"westeros");
  myChart.setOption({
    title: {
      text: "新增患者信息"
    },
    tooltip: {
      // trigger: 'none'  // 不触发鼠标悬浮显示数据
      //trigger: 'item'     // 当鼠标悬浮在某个数据项上时触发
      trigger: 'axis'     // 当鼠标悬浮在坐标轴上时触发

    },
    xAxis: {
      type: "category",
      data: dataB2.d1
    },
    yAxis: {
      type: "value"
    },
    series: [
      {
        data: dataB2.d2,
        smooth: true,
        type: "line",
        name: "人数",
        color: "#46a828"
      },
    ]
  });
};

//表3：
const initEcharts3 = (dataB3) => {
  // var myChart = echarts.init(document.getElementById('myEcharts'));
  let myChart = echarts.init(b3.value,"westeros");
  myChart.setOption({
    title: {
      text: "住院人数"
    },
    tooltip: {
      trigger: 'axis'
    },
    xAxis: {
      data: dataB3.d1
    },
    yAxis: {},
    series: [
      {
        name: "人数",
        type: "bar",
        data: dataB3.d2
      }
    ]
  });
};


//表4：
const initEcharts4 = (dataB4) => {
  // var myChart = echarts.init(document.getElementById('myEcharts'));
  let myChart = echarts.init(b4.value);
  myChart.setOption({
    title: {
      text: "收入"
    },
    tooltip: {},
    xAxis: {
      data: dataB4.d1
    },
    yAxis: {},
    series: [
      // {
      //   name: "销量",
      //   type: "bar",
      //   data: [5, 20, 36, 10, 10, 20]
      // }
      {
        name: "销量",
        type: "line",
        data: dataB4.d2
      }

    ]
  });
};



</script>

<style scoped>
.myEcharts {
  width: 600px;
  height: 350px;
}
</style>